<template>
  <div class="service">
    <div class="service__top">
      <div class="service__top-title">客服服务、工程服务</div>
      <div class="service__top-content">
        <div>
          <ve-pie :data="chartData" :settings="chartSettings" :legend-visible="false" :extend="chartExtend" width="11rem" height="10rem"></ve-pie>
          <div class="service__top-order">今日工单数{{milliFormat(bsNum + jrbxNum + tsNum)}}</div>
        </div>
        <div class="service__top-line"></div>
        <div class="service__top-ring">
          <div id="main" style="width: 15rem;height:10rem;"></div>
        </div>
      </div>
    </div>
    <div class="service__middle">
      <table>
        <tr>
          <td>
            <p class="title">保洁总数人数</p>
            <p class="num">{{milliFormat(bjbaDataAll.bjNum)}}</p>
            <!-- <p class="num">1224</p> -->
          </td>
          <td>
            <p class="title">当日在岗人数</p>
            <p class="num">{{milliFormat(bjbaDataAll.bjzgNum)}}</p>
            <!-- <p class="num">1210</p> -->
          </td>
          <td>
            <p class="title">智卡点位总数</p>
            <p class="num">{{milliFormat(bjbaDataAll.zkdwzs)}}</p>
          </td>
          <td rowspan="2" class="tip">
            保洁服务
          </td>
        </tr>
        <tr>
          <td>
            <p class="title">智卡打卡数</p>
            <p class="num">{{milliFormat(bjbaDataAll.zkdks)}}</p>
          </td>
          <td>
            <!-- <p class="title">打卡异常数</p>
            <p class="num">{{milliFormat(bjbaDataAll.zkdkycs)}}</p> -->
          </td>
          <td>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td rowspan="2" class="tip2">
            秩序维护服务
          </td>
          <td>
            <p class="title">保安总人数</p>
            <p class="num">{{milliFormat(bjbaDataAll.baNum)}}</p>
            <!-- <p class="num">1284</p> -->
          </td>
          <td>
            <p class="title">当日在岗人数</p>
            <p class="num">{{milliFormat(bjbaDataAll.bazgNum)}}</p>
            <!-- <p class="num">1243</p> -->
          </td>
          <td>
            <p class="title">巡更点位数</p>
            <p class="num">{{milliFormat(bjbaDataAll.xgdws)}}</p>
          </td>
        </tr>
        <tr>
          <td>
            <p class="title">巡更打卡数</p>
            <p class="num">{{milliFormat(bjbaDataAll.xgdks)}}</p>
          </td>
          <td>
            <!-- <p class="title">打卡异常数</p>
            <p class="num">{{milliFormat(bjbaDataAll.xgdkycs)}}</p> -->
          </td>
          <td>
          </td>
        </tr>
      </table>
    </div>
    <div class="service__equipment">
      <div class="equipment-item item1">
        <span class="title">监测设备总数</span>
        <span class="num">{{milliFormat(xgxjAll.jcsbzs)}}</span>
      </div>
      <div class="equipment-item item2">
        <span class="title">设备正常运转率</span>
        <span class="num">{{xgxjAll.sbzcyzl}} %</span>
      </div>
      <div class="equipment-item item3">
        <span class="title">设备巡检数</span>
        <span class="num">{{milliFormat(xgxjAll.sbxjs)}}</span>
      </div>
      <div class="equipment-item item4">
        <span class="title">巡检异常数</span>
        <span class="num">{{milliFormat(xgxjAll.jrbjjl)}}</span>
      </div>
      <div class="item5">设备巡检</div>
    </div>
    <div class="service__bottom">
      <table>
        <tr>
          <td colspan="3" class="park">
            产业园
          </td>
        </tr>
        <tr>
          <td>
            <p class="title">
              <span>入驻企业总数</span>
              <span></span>
            </p>
            <p>
              <span class="num">{{milliFormat(yqAll.rzqyzs)}}</span>
              <span class="units">个</span>
            </p>
          </td>
          <td>
            <p class="title">
              <span>入驻企业年产值</span>
              <span>（{{cyqYear}}年）</span>
            </p>
            <p>
              <span class="num">{{milliFormat(yqAll.rzqyncz)}}</span>
              <span class="units">万元</span>
            </p>
          </td>
          <td>
            <p class="title">
              <span>入驻企业年纳税金额 </span>
              <span>（{{cyqYear}}年）</span>
            </p>
            <p>
              <span class="num">{{milliFormat(yqAll.rzqynnse)}}</span>
              <span class="units">万元</span>
            </p>
          </td>
        </tr>
        <tr>
          <td>
            <p class="title">进出人数（昨日）</p>
            <p>
              <span class="num">{{milliFormat(yqAll.jcrs)}}</span>
              <span class="units">人</span>
            </p>
          </td>
          <td>
            <p class="title">车辆进出（昨日）</p>
            <p>
              <span class="num">{{milliFormat(yqAll.cljc)}}</span>
              <span class="units">次</span>
            </p>
          </td>
          <td>
            <p class="title">食堂就餐人数（昨日）</p>
            <p>
              <span class="num">{{milliFormat(yqAll.stjcrs)}}</span>
              <span class="units">人</span>
            </p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
import Vpie from 'v-charts/lib/pie.common'
// import BaseRing from 'src/components/BaseRing'
import { milliFormat, formatFontSize } from 'js/utils'
import {
getSyAll,
} from 'src/api/api'
export default {
  components: {
    [Vpie.name]: Vpie,
    // BaseRing
  },
  props: {
    yqAll: {
      type: Object,
      default: ()=>{}
    },
    xgxjAll: {
      type: Object,
      default: ()=>{}
    },
    bjbaDataAll: {
      type: Object,
      default: ()=>{}
    },
    fwzxAll:{
      type: Object,
      default: ()=>{}
    },
    cyqYear: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      chartSettings: {
        dimension: 'name',
        metrics: 'value',
        // roseType: 'radius',
        radius: formatFontSize(0.43),
        offsetY: '60%',
        labelLine: {
          length: formatFontSize(0.05),
          length2: formatFontSize(0.05),
        },
        label: {
          show: true,
          // position: 'inner',
          // color: '#0B153A',
          fontSize: formatFontSize(0.11),
          // formatter: '{b}{c}'
        }
      },
      chartExtend: {
        tooltip: {
          show: true,
          position: ['50%', '50%'],
        },
        color: ['#E56F82', '#45F0EA', '#EDB049'],
      },
      chartData: {
        columns: ['name', 'value'],
        rows: []
      },
      data: this.fwzxAll.rate,
      exchangeChart: null,
      sumValue: 0,
      bsNum: this.fwzxAll.bsNum,
      jrbxNum: this.fwzxAll.jrbxNum,
      tsNum: this.fwzxAll.tsNum,
    }
  },
  watch: {
    fwzxAll(val) {
      // console.log(val)
      this.data = val.rate
      this.bsNum = val.bsNum
      this.jrbxNum = val.jrbxNum
      this.tsNum = val.tsNum
      this._getchartData()
      this._setPieData()
    }
  },
  mounted() {
    this._getchartData()
    this._setPieData()
  },
  methods: {
    milliFormat(num) {
      return milliFormat(num)
    },
    formatFontSize(num) {
      return formatFontSize(num)
    },
    getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
          array.forEach(function(t) {
              res.push(t[key]);
          });
      }
      return res;
    },
    array2obj(array,key) {
      var resObj = {};
      if(array && array.length) {
        for(var i=0;i<array.length;i++){
          resObj[array[i][key]] = array[i];
        }
      }
      return resObj;
    },
    getData(data) {
      var res = {
          series: [],
          yAxis: []
      };
      if(data && data.length) {
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["35%", "65%"],
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false
              },
              borderWidth: this.formatFontSize(0.05),
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name
              }, 
              {
                // value: this.sumValue - data[i].value,
                value: 100 - data[i].value ,
                name: '',
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }
            ]
          });
          res.series.push({
            name: '背景',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["35%", "65%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 10,
                itemStyle: {
                    color: "rgba(26,51,72,1)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, 
            ]
          });
          res.yAxis.push((data[i].value))
        }
      }
      return res;
    },
    _getchartData() {
      // console.log(this.fwzxAll)
      // this.data = this.fwzxAll.rate
      let arrName = this.getArrayValue(this.data, "name")
      let arrValue = this.getArrayValue(this.data, "value")
      // this.sumValue = eval(arrValue.join('+'))
      let objData = this.array2obj(this.data, "name")
      let optionData = this.getData(this.data)
      let option = {
        legend: {
            show: true,
            top: "25%",
            left: '60%',
            data: arrName,
            itemWidth: this.formatFontSize(0.12),
            itemHeight: this.formatFontSize(0.06),
            width:this.formatFontSize(0.5),
            // padding: [0, this.formatFontSize(0.05)],
            itemGap: this.formatFontSize(0.1),
            formatter: function(name) {
              return "{title|" + name + "}\n{value|" + (objData[name].value) + "%}"
            },
            textStyle: {
              rich: {
                  title: {
                      fontSize: this.formatFontSize(0.1),
                      lineHeight: this.formatFontSize(0.1),
                      color: "#fff",
                  },
                  value: {
                      fontSize: this.formatFontSize(0.1),
                      lineHeight: this.formatFontSize(0.15),
                      verticalAlign: 'bottom',
                      color: "#fff"
                  }
              }
            },
            selectedMode: false,
        },
        tooltip: {
            show: false,
            trigger: "item",
            formatter: "{a}<br>{b}:{c}({d}%)"
        },
        color: ['#53ED73', '#FFEA00', '#3FFFEA', '#E56F82'],
        grid: {
            top: '30%',
            bottom: '48%',
            left: "30%",
            containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: "#fff",
              fontSize: this.formatFontSize(0.1),
            },
            show: false
          },
          data: optionData.yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: optionData.series
      }
      this.activeChart = echarts.init(document.getElementById('main'))
      this.activeChart.setOption(option, true)
    },
    _setPieData() {
      this.chartData.rows = [
      { 'name': '报事单', 'value': this.bsNum},
      { 'name': '报修单', 'value': this.jrbxNum },
      { 'name': '投诉单', 'value': this.tsNum },
      ]
    },
  }
}
</script>

<style lang="scss">
.service {
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  &__top {
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    &-title {
      background: #E56F82;
      line-height: 30px;
      height: 30px;
      width: 150px;
      font-size:14px;
      font-family:PingFang SC;
      font-weight:600;
      color: #fff;
      border-radius: 5px;
      text-align: center;
      margin: 0 28%;
    }
    &-content {
      display: flex;
      justify-content: space-around;
    }
    &-order {
      font-size: 12px;
      text-align: center;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #7CA1D2;
    }
    &-line {
      background: rgba(229,111,130,1);
      height: 80px;
      position: relative;
      width: 1px;
    }
    &-line:after {
        background: rgba(229,111,130,1);
        content: "";
        height: 1px;
        left: -40px;
        position: absolute;
        top: 80px;
        width: 80px;
    }
  }
  &__middle {
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    table {
      margin-bottom: 20px;
      width: 90%;
    }
    tr {
      // display: flex;
    }
    td {
      border: 1px solid #fff;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      text-align: center;
      vertical-align: middle;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 200;
      padding: 5px;
      // width: 100px;
      // height: 40px;
      line-height: 20px;
    }
    .title {
      opacity: 0.5;
    }
    .num {
      padding-top: 5px;
      font-weight:400;
      font-size: 16px;
    }
    .tip {
      width: 60px;
      border: 0;
      // background: #706142;
      background: #410995;
      font-weight: normal;
    }
    .tip2 {
      width: 60px;
      border: 0;
      background: #093A95;
      font-weight: normal;
    }
  }
  &__equipment {
    margin-top: 40px;
    border: 1px solid #039A6A;
    border-left: 0;
    width: 65%;
    height: 80px;
    position: relative;
    .equipment-item {
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #041969;
      // padding: 10px;
      width: 120px;
      height: 60px;
      position: absolute;
    }
    .title {
      font-size:13px;
    }
    .num {
      font-size:24px;
      font-family: serif;
      font-weight: 900;
      padding-top: 5px;
    }
    .item1 {
      background: #53ED73;
      left: -40px;
      top: -30px;
      left: -15%;
    }
    .item2 {
      background: #FFA1B0;
      left: 120px;
      top: -30px;
      left: 40%;
    }
    .item3 {
      background: #D89CFD;
      left: -40px;
      bottom: -30px;
      left: -15%;
    }
    .item4 {
      background: #FFEA00;
      left: 120px;
      bottom: -30px;
      left: 40%;
    }
    .item5 {
      background: #039A6A;
      border-radius: 28px;
      text-align: center;
      line-height: 50px;
      width: 100px;
      height: 50px;
      position: absolute;
      right: -45px;
      top: 15px;
      font-size: 14px;
      font-weight: 900;
      right: -15%;
    }
  }
  &__bottom {
    margin-top: 60px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    table {
      width: 90%;
    }
    .park {
      background: #02A59F;
      font-size: 20px;
      font-family: FZZhunYuan-M02S;
      font-weight: 400;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #02A59F;
    }
    td {
      border: 1px solid #1C639B;
      width: 130px;
      padding: 10px 0;
      height: 65px;
      text-align: center;
      vertical-align: middle;
    }
    .title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 300;
      color: #7CA1D2;
      // padding-bottom: 5px;
      height: 30px;
      line-height: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .num {
      font-size: 22px;
      font-family:FZZhunYuan-M02S;
      font-weight: 900;
      color: #45F0EA;
    }
    .units {
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #fff;
    }
  }
}
</style>
